<template>
    <div class="common-layout">
        <video src="../assets/img/bg.mp4" autoplay muted loop></video>
        <el-container>
            <el-header>
                <div class="nav">
                    <ul>
                        <router-link :to="item.path" custom v-slot="{ navigate, isActive }" v-for="item of arrRouter"
                            :key="item.name">
                            <li @click="navigate" :class="{ active: isActive }">
                                {{ item.name }}
                            </li>
                        </router-link>
                    </ul>
                    <ol>
                        <li @click="router.push('/login')" class="li" v-show="flag">
                            登录
                        </li>
                        <li @click="router.push('/login/register')" class="li" v-show="flag">
                            注册
                        </li>
                        <li class="lis" v-show="!flag">
                            <img :src="imgUrl" alt="" />
                        </li>
                        <li class="lis hand" @click="out" v-show="!flag">👈退出登录</li>
                    </ol>
                </div>
            </el-header>
            <el-main>
                <div class="main">
                    <router-view></router-view>
                </div>
            </el-main>
            <el-footer>©青木川川川川川川</el-footer>
        </el-container>
    </div>
    <div id="content" class="mw-body" role="main"></div>
</template>

<script setup>
//live2D配置项
import "../assets/js/live2D.js";
import axios from "../axios/index.js";
import { useRouter } from "vue-router";
import { onBeforeMount, ref, reactive } from "vue";
const router = useRouter();

//判断是否登录
let flag = ref(true);

let imgUrl = ref(require("../assets/img/mrtx.webp"));
//头部导航栏渲染数组
let arrRouter = reactive([]);

//在挂载前判断是否是管理员账号登录
onBeforeMount(() => {
    storage();
});

//获取当前用户登录的头像
async function sculpture() {
    if (window.localStorage.getItem("id")) {
        let { data } = await axios.get(
            `/admin/tx?id=${window.localStorage.getItem("id")}`
        );
        imgUrl.value = data;
    }
}
sculpture();

//当本地绘画存储里面值改变时，登录注册模块发生改变
function storage() {
    if (window.localStorage.getItem("id")) {
        flag.value = false;
    } else {
        flag.value = true;
    }
    // 管理员账号默认id为1
    if (window.localStorage.getItem("id") != "1") {
        arrRouter = [
            {
                name: "首页",
                path: "/Index/homes",
            },
            {
                name: "分类",
                path: "/Index/class",
            },
            {
                name: "留言",
                path: "/Index/message",
            },
            {
                name: "关于我",
                path: "/Index/my",
            },
        ]
        return
    } else if (window.localStorage.getItem("id") === "1") {
        arrRouter = [
            {
                name: "首页",
                path: "/Index/homes",
            },
            {
                name: "分类",
                path: "/Index/class",
            },
            {
                name: "留言",
                path: "/Index/message",
            },
            {
                name: "发布",
                path: "/Index/release",
            },
            {
                name: "关于我",
                path: "/Index/my",
            },
        ];
    }
}

window.addEventListener("storage", (e) => {
    console.log(123);
    storage();
});

// 退出登录的点击事件
function out() {
    clearCookie();
    window.localStorage.removeItem("id");
    storage();
}

//清除Cookie函数
function clearCookie() {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if (keys) {
        for (var i = keys.length; i--;) {
            document.cookie =
                keys[i] + "=0;path=/;expires=" + new Date(0).toUTCString(); //清除当前域名下的,例如：m.kevis.com
            document.cookie =
                keys[i] +
                "=0;path=/;domain=" +
                document.domain +
                ";expires=" +
                new Date(0).toUTCString(); //清除当前域名下的，例如 .m.kevis.com
            document.cookie =
                keys[i] +
                "=0;path=/;domain=kevis.com;expires=" +
                new Date(0).toUTCString(); //清除一级域名下的或指定的，例如 .kevis.com
        }
    }
}
</script>

<style lang="less" scoped>
.common-layout {
    position: relative;
    font-size: 0.16rem;

    video {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 1;
        object-fit: cover;
        object-position: center;
    }

    .el-container {
        min-height: 100vh;
        width: 100vw;
        position: absolute;
        z-index: 999;

        .el-header {
            height: 1rem;
            background-color: @white;
            padding: 0;

            .nav {
                width: 15.2rem;
                display: flex;
                margin-left: 3rem;
                justify-content: space-between;
                color: @0099ff-color;

                ul {
                    display: flex;

                    .active {
                        background-color: @nav-bgc;
                    }

                    li {
                        height: 1rem;
                        padding: 0 0.3rem;
                        line-height: 1rem;
                        cursor: pointer;
                        font-weight: 900;
                        font-size: 20px;
                    }

                    :hover {
                        background-color: @nav-bgc;
                    }
                }

                ol {
                    display: flex;
                    align-items: center;

                    .li {
                        margin-left: 0.2rem;
                        height: 0.4rem;
                        width: 0.8rem;
                        font-weight: 700;
                        font-size: 0.18rem;
                        text-align: center;
                        line-height: 0.4rem;
                        border-radius: 0.08rem;
                        border: 0.03rem solid @nav-bgc;
                        cursor: pointer;
                    }

                    .li:hover {
                        background-color: @nav-bgc;
                        color: @white;
                    }

                    .lis {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 1.3rem;
                        font-size: 0.2rem;
                        color: #0099ff;

                        img {
                            width: 0.8rem;
                            border-radius: 50%;
                        }
                    }

                    .hand {
                        cursor: pointer;
                    }
                }
            }
        }

        .el-main {
            padding: 0;
            overflow-x: hidden;
            .main {
                width: 15.2rem;
                margin: 0.4rem 0 0 3rem;
            }
        }

        .el-footer {
            min-width: 1200px;
            position: relative;
            bottom: 0;
            height: 0.5rem;
            text-align: center;
            color: @white;
            line-height: 0.5rem;
        }
    }
}
</style>
